<template>
  <div class="header">
    <div class="nav_wrap">
      <i class="el-icon-user-solid icon"></i>
      <p class="title">微记账</p>
      <span class="nav">{{ navName }}</span>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    navName: {
      type: String,
      required: true,
      default: "首页",
    },
  },
}
</script>

<style lang="scss" scoped>
.header {
  background-color: #28fc79;
  color: #fff;
  .nav_wrap {
    display: flex;
    align-items: center;
    padding: 18px 20px;
    height: 62px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.5); // 白色分割线;
    .icon {
      font-size: 18px;
    }
    .title {
      flex-grow: 1;
      text-align: center;
      font-size: 22px;
    }
  }
}
</style>
